<script setup lang="ts">
import { getSmsSendAPI, getWeChatAPI } from '@/api/login';
import { LoginParam } from '@/api/type/login';
import { useUserStore } from '@/store/modules/user';
import {Lock,User} from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const userStore=useUserStore()
const route=useRoute()
const router=useRouter()
let showWechat=ref<boolean>(true)
const changeWechat=async()=>{
  showWechat.value=false
  let wxRedirectUri=encodeURIComponent(window.location.origin+'/wxlogin')
  const res=await getWeChatAPI(wxRedirectUri)
  console.log(res);
  
  //@ts-ignore
 new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: res.data.appid, 
 scope: "snsapi_login", 
 redirect_uri: res.data.redirectUri,
  state: res.data.state,
 style: "black",
 href: ""
 });
}

const formRef=ref<FormInstance>()
const form=ref<LoginParam>({
  code:'',
  phone:''
})

const rule=ref({
  code: [{ required: true, message: '请输入正确的验证码', trigger: 'blur' }],
  phone:[{required:true,message:'请输入正确的手机号码',trigger:'blur'}]
})
const isPhone=computed(()=>{
  const reg=/^(?:(?:\+|00)86)?1\d{10}$/
  return reg.test(form.value.phone)
})
let time=ref<number>(60)
const getCode=async()=>{
  flag.value=false
  let timer=setInterval(()=>{
    time.value--
    if(time.value===0){
      clearInterval(timer)
      flag.value=true
    }
    
  },1000)
  const res=await getSmsSendAPI(form.value.phone)
  form.value.code=res.data
}

let flag=ref<boolean>(true)
userStore.getMeber()
const lgoin=async()=>{
  await formRef.value?.validate()
  userStore.getToken(form.value)
  const redirect=route.query.redirect
  if(redirect){
    router.push(redirect as string)
  }else {
    router.push('/home')
  }
  userStore.dialogTableVisible=false

  formRef.value?.resetFields()
}

const close=()=>{
  formRef.value?.resetFields()
}
</script>

<template>
  <div class="login_contanie">
    <el-dialog  @close="close" title="用户登录" v-model="userStore.dialogTableVisible" style="height: 500px;" width="800" >
        <el-row>
          <el-col :span="12">
            <div class="login" v-if="showWechat">
            <el-form style="height: 150px;" :model="form" :rules="rule" ref="formRef">
              <el-form-item prop="phone">
                <el-input v-model="form.phone" :prefix-icon="User" placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model="form.code" :prefix-icon="Lock" placeholder="请输入手机验证码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="getCode" :disabled="!isPhone||!flag" size="small">
                  <span v-if="flag">获取验证码</span>
                  <span v-else>再次获取验证码({{ time }})</span>
                </el-button>
              </el-form-item>
            </el-form>
            <div class="bottom">
              <el-button type="primary" style="width: 100%;" @click="lgoin" :disabled="!isPhone||!form.code" >用户登录</el-button>
              <div @click="changeWechat" class="wechat_wrapper">
                <p>微信扫码登录</p>
              <svg t="1728284412599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10583" width="32" height="32"><path d="M544.059897 959.266898h-64.949141c-228.633593 0-415.697442-187.063849-415.697442-415.697442v-64.949141c0-228.633593 187.063849-415.697442 415.697442-415.697442h64.949141c228.633593 0 415.697442 187.063849 415.697442 415.697442v64.949141C959.756315 772.203049 772.692466 959.266898 544.059897 959.266898z" fill="#1afa29" p-id="10584" data-spm-anchor-id="a313x.search_index.0.i2.5c173a81ez3spz" class="selected"></path><path d="M618.871102 424.812069c-52.6789 2.760395-98.49572 18.754507-135.696546 54.89766-37.587854 36.50356-54.743053 81.262707-50.047514 136.728622-20.586238-2.580191-39.34177-5.366183-58.19969-6.965492-6.552866-0.516038-14.292415 0.258019-19.786584 3.353224-18.316285 10.318716-35.858512 22.030941-56.703793 35.085479 3.818068-17.284208 6.294847-32.505287 10.680148-47.029101 3.173021-10.732366 1.702721-16.691379-8.152175-23.65687-63.256659-44.73355-89.905323-111.652647-69.963108-180.584703 18.470891-63.720479 63.798295-102.417201 125.376806-122.539619 84.100917-27.500536 178.52055 0.567232 229.651335 67.409538 18.733006 24.012159 30.112467 52.935895 32.763306 83.275665L618.871102 424.812069zM737.231222 753.7854c-16.691379-7.429312-31.989249-18.574304-48.241381-20.302622-16.252132-1.702721-33.330539 7.687331-50.305534 9.416673-51.724639 5.288368-98.0319-9.132033-136.263778-44.526725-72.646712-67.331723-62.275777-170.522981 21.799542-225.730878 74.736462-49.015438 184.324956-32.659894 237.003856 35.342474 45.971427 59.386373 40.55405 138.198922-15.55589 188.066232-16.252132 14.447022-22.108756 26.313853-11.686627 45.32638 1.909546 3.508855 2.140944 7.94535 3.250836 12.382869L737.231222 753.7854zM376.397651 403.348361c0.516038-12.640888-10.422129-23.991681-23.373254-24.353112-13.025869-0.533444-24.017278 9.593805-24.550722 22.619674-0.003072 0.078839-0.006143 0.158702-0.008191 0.237542-0.512967 12.869215 9.503704 23.719327 22.372918 24.232294 0.238565 0.009215 0.477131 0.015358 0.715696 0.017406C364.663926 426.584415 375.730078 416.448974 376.397651 403.348361zM502.909946 378.995249c-13.00232 0.258019-23.991681 11.350793-23.733662 23.99168 0.280545 13.104708 11.131681 23.50124 24.23639 23.220696 0.038908-0.001024 0.077815-0.002048 0.116723-0.003072 12.865119 0.104436 23.379398-10.239877 23.483834-23.104996 0.002048-0.278497 0-0.556994-0.008192-0.835491-0.109556-12.96546-10.708817-23.386565-23.673252-23.277009C503.191515 378.989105 503.050218 378.991153 502.909946 378.995249zM547.334283 569.640648c10.628954 0 19.348361-8.332379 19.760986-18.832323 0.384981-10.920761-8.15627-20.086582-19.077031-20.471563-0.176108-0.006143-0.352217-0.010239-0.529349-0.011262-11.041579 0.069624-19.937095 9.076743-19.867471 20.118322 0.001024 0.08703 0.002048 0.175084 0.003072 0.262115C528.092406 561.263219 536.764714 569.595597 547.334283 569.640648zM669.743869 530.351097c-10.452845 0.086006-19.011503 8.337498-19.477371 18.781128-0.570304 10.670933 7.617707 19.782488 18.28864 20.352793 0.310237 0.016382 0.620475 0.025597 0.930712 0.027645 10.654551 0 19.090342-8.07436 19.47737-18.703314 0.528325-10.772298-7.776409-19.934023-18.548706-20.462348-0.223207-0.011263-0.447438-0.01843-0.670645-0.021501V530.351097z" fill="#FFFFFF" p-id="10585"></path></svg>
              </div>
            </div>
            </div>
            <div class="wechat" v-else>
              <div id="login_container" style="height: 250px;">
              </div>
              <div class="phone" style="cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: center;" @click="showWechat=true">
                <svg t="1728285218324" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17673" width="20" height="20"><path d="M726.0164 85.266693H299.582975c-47.081609 0-85.266693 38.185084-85.266692 85.266692v682.433425c0 47.081609 38.185084 85.266693 85.266692 85.266693h426.533386c47.081609 0 85.266693-38.185084 85.266692-85.266693V170.633346c0-47.18157-38.185084-85.366654-85.366653-85.366653z m-426.433425 42.683327h426.533386c23.490824 0 42.683327 19.092542 42.683327 42.683326v533.091761H256.899649V170.633346c0-23.590785 19.092542-42.683327 42.683326-42.683326z m426.433425 767.700117H299.582975c-23.490824 0-42.683327-19.092542-42.683326-42.683327V746.408434h511.800078V853.066771c0 23.490824-19.092542 42.583366-42.683327 42.583366z" p-id="17674" fill="#bfbfbf"></path><path d="M512.799688 810.383444m-42.683327 0a42.683327 42.683327 0 1 0 85.366653 0 42.683327 42.683327 0 1 0-85.366653 0Z" p-id="17675" fill="#bfbfbf"></path></svg>
                <span>手机验证码登录</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/code_login_wechat.png" alt="">
                <svg t="1728284974431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15516" id="mx_n_1728284974431" width="20" height="20"><path d="M715.542857 358.171429c6.742857 0 13.485714 0.228571 20.114286 0.571428-27.885714-147.085714-180.914286-259.542857-365.6-259.542857C165.714286 99.2 0 237.028571 0 407.085714c0 92.685714 49.828571 176.228571 127.885714 232.685715a24.571429 24.571429 0 0 1 10.4 20.114285c0 2.742857-0.571429 5.257143-1.257143 7.885715-6.285714 23.2-16.228571 60.342857-16.685714 62.057142-0.8 2.971429-1.942857 5.942857-1.942857 9.028572 0 6.742857 5.485714 12.342857 12.342857 12.342857 2.628571 0 4.8-1.028571 7.085714-2.285714l81.028572-46.742857c6.057143-3.542857 12.571429-5.714286 19.657143-5.714286 3.657143 0 7.314286 0.571429 10.857143 1.6 37.828571 10.857143 78.628571 16.914286 120.8 16.914286 6.857143 0 13.6-0.114286 20.342857-0.457143-8.114286-24-12.457143-49.257143-12.457143-75.428572 0-155.2 151.085714-280.914286 337.485714-280.914285z m-222.057143-98.857143c27.2 0 49.371429 22.057143 49.371429 49.257143s-22.057143 49.257143-49.371429 49.257142c-27.2 0-49.371429-22.057143-49.371428-49.257142s22.171429-49.257143 49.371428-49.257143z m-246.742857 98.514285c-27.2 0-49.371429-22.057143-49.371428-49.257142s22.057143-49.257143 49.371428-49.257143 49.371429 22.057143 49.371429 49.257143-22.171429 49.257143-49.371429 49.257142z m670.628572 474.971429c65.028571-47.085714 106.514286-116.571429 106.514285-193.942857 0-141.714286-138.057143-256.571429-308.457143-256.571429-170.285714 0-308.457143 114.857143-308.457142 256.571429S545.028571 895.428571 715.428571 895.428571c35.2 0 69.257143-5.028571 100.685715-14.057142 2.971429-0.914286 5.942857-1.371429 9.028571-1.371429 5.942857 0 11.314286 1.828571 16.342857 4.685714l67.542857 38.857143c1.942857 1.142857 3.771429 1.942857 5.942858 1.942857a10.285714 10.285714 0 0 0 7.314285-2.971428 10.285714 10.285714 0 0 0 2.971429-7.314286c0-2.514286-1.028571-5.028571-1.6-7.542857-0.342857-1.371429-8.685714-32.342857-13.942857-51.771429-0.571429-2.171429-1.028571-4.342857-1.028572-6.514285 0.114286-6.742857 3.542857-12.8 8.685715-16.571429zM612.8 597.942857c-22.742857 0-41.142857-18.4-41.142857-41.028571 0-22.628571 18.4-41.028571 41.142857-41.028572s41.142857 18.4 41.142857 41.028572c0 22.628571-18.514286 41.028571-41.142857 41.028571z m205.6 0c-22.742857 0-41.142857-18.4-41.142857-41.028571 0-22.628571 18.4-41.028571 41.142857-41.028572s41.142857 18.4 41.142857 41.028572a41.234286 41.234286 0 0 1-41.142857 41.028571z" p-id="15517" fill="#515151"></path></svg>
                <span>微信扫一扫关注</span>
                <span> “快速预约挂号”</span>
              </div>
              <div class="left">
                <img src="../../assets/images/code_app.png" alt="">
                <svg t="1728285218324" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17673" width="20" height="20"><path d="M726.0164 85.266693H299.582975c-47.081609 0-85.266693 38.185084-85.266692 85.266692v682.433425c0 47.081609 38.185084 85.266693 85.266692 85.266693h426.533386c47.081609 0 85.266693-38.185084 85.266692-85.266693V170.633346c0-47.18157-38.185084-85.366654-85.366653-85.366653z m-426.433425 42.683327h426.533386c23.490824 0 42.683327 19.092542 42.683327 42.683326v533.091761H256.899649V170.633346c0-23.590785 19.092542-42.683327 42.683326-42.683326z m426.433425 767.700117H299.582975c-23.490824 0-42.683327-19.092542-42.683326-42.683327V746.408434h511.800078V853.066771c0 23.490824-19.092542 42.583366-42.683327 42.583366z" p-id="17674" fill="#bfbfbf"></path><path d="M512.799688 810.383444m-42.683327 0a42.683327 42.683327 0 1 0 85.366653 0 42.683327 42.683327 0 1 0-85.366653 0Z" p-id="17675" fill="#bfbfbf"></path></svg>
                <span> 扫一扫下载</span>
                <span> “预约挂号”APP</span>
              </div>
            </div>
            <div class="slogan">
              <div>xxxxxx官方指定平台</div> 
              <div>快速挂号 安全放心</div>
            </div>
          </el-col>
        </el-row>
  
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.login_contanie {
  .login {
    padding: 20px;
    border: 1px solid #efefef;
    .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .wechat_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
      }
      .wechat_wrapper:hover {
        p {
          color: #000;
          font-weight: 700;
        }
        
      }
      p {
        color: #ccc;
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
  .top {
    display: flex;
    justify-content: space-around;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 140px;
        height: 140px;
        margin-bottom: 22px;
      }
    }
  }
  .slogan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
    color: #000;
    font-size: 20px;
    div {
      height: 44px;
    }
  }
}
</style>